<template>
	<view class="group-member">
		<view class="member">
			<view class="" v-for="(member, key) in members" :key="key">
				<image :src="member.avatar" class="group-member__item">
				</image>
				<view class="" style="margin-left: 10rpx; margin-top: -20rpx; padding-bottom: 50rpx;">
					{{member.name}}
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: 'member',
		data() {
			return {
				members: {}
			}
		},
		onLoad(options) {
			//群成员数据
			this.members = JSON.parse(options.members);
			uni.setNavigationBarTitle({
				title: '成员（' + (this.members.length || 0) + '）'
			});
		}
	}
</script>

<style>
	.member {
		width: 98%;
		display: flex;
		flex-wrap: wrap;
		margin-left: 50rpx;
		margin-top: 20rpx;
		justify-content: flex-start; // 替代原先的space-between布局方式
	}

	.group-member__item {
		flex: 1;
		height: 96rpx;
		width: 96rpx;
		border-radius: 48rpx;
		margin: 0 20px 20px 0; // 间隙为5px
		background-color: #999;

		/* 
		&:nth-child(3n) {
			// 去除第3n个的margin-right
			margin-right: 0;
		} */

		/* 		
		 */

		/* 		margin-right: 20rpx;
		margin-bottom: 20rpx; */
	}
</style>
